<!--
 * @Author: your name
 * @Date: 2021-12-26 19:08:17
 * @LastEditTime: 2021-12-31 09:39:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui\src\pages\sys\user\Personal.vue
-->
<template>
  <div class="user">
    <div class="header">
      <!-- 左侧侧边头像编辑区域 -->
      <div class="block">
        <!-- 照片墙 -->
        <span class="demonstration" />
        <el-image :src="user.userFace" />
      </div>

      <!-- 头像 -->
      <div class="demo-basic--circle">
        <div class="name">
          <div class="block">
            <el-avatar :size="100" :src="user.userFace" />
          </div>
          <div class="yongHuName" />
        </div>
        <!-- 编辑头像 -->
        <div class="xiuGaiTouXian">
          <div class="el-icon-edit">
            <el-button type="text" @click="toEditImg">修改头像</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧个人信息编辑区域 -->

    <div class="gerenxx">
      <div class="xx">
        <!-- 右侧个人信息编辑区域 -->
        <el-radio-group
          v-model="labelPosition"
          style="paading: 20px"
          size="small"
        >
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 50px" />
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <div class="el-icon-edit">
            <el-form-item label="用户名:">
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
              {{ user.username }}
            </el-form-item>
          </div>
          <br>
          <div class="el-icon-user">
            <el-form-item label="姓名:">
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
              {{ user.realname }}
            </el-form-item>
          </div><br>
          <div class="el-icon-s-custom">
            <el-form-item label="性别:">
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
              {{ user.gender }}
            </el-form-item>
          </div><br>
          <div class="el-icon-phone">
            <el-form-item label="手机号:">
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
              {{ user.telephone }}
            </el-form-item>
          </div><br>
          <div v-if="user.roles" class="el-icon-s-check">
            <el-form-item label="角色:">
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
              {{ user.roles[0].name }}
            </el-form-item>
          </div><br>
          <div class="el-icon-potato-strips">
            <el-form-item label="生日:">
              <!-- <el-input v-model="formLabelAlign.region"></el-input> -->
              {{ user.registerTime | fmtDate }}
            </el-form-item>
          </div>
          <br>
          <div class="el-icon-edit-outline">
            <el-form-item label="状态:">
              <!-- <el-input v-model="formLabelAlign.type"></el-input> -->
              {{ user.status }}
            </el-form-item>
          </div><br>
        </el-form>
        <div class="btn">
          <el-button
            type="text"
            @click="EditInfomation"
          >编辑个人信息</el-button>
        </div>

        <!-- 模态框-个人信息 -->
        <el-dialog :title="title" :visible.sync="visible">
          <el-form ref="user_form" :model="form" :rules="rules">
            <el-form-item label="用户名" label-width="80px" prop="username">
              <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" label-width="80px" prop="realname">
              <el-input v-model="form.realname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" label-width="80px" prop="password">
              <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" label-width="80px" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" label-width="80px">
              <el-input v-model="form.telephone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="出生日期" label-width="80px">
              <el-date-picker
                v-model="form.birth"
                value-format="timestamp"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="visible = false">取 消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="saveUserHandler"
            >确 定</el-button>
          </div>
        </el-dialog>

        <!-- 模态框-修改头像 -->
        <el-dialog :title="title" :visible.sync="visible1">
          <div class="upload">
            <el-upload
              ref="upload"
              :data="data"
              class="avatar-uploader"
              action="http://121.199.29.84:8001/file/upload"
              :on-success="uploadSuccessHandler"
              :file-list="fileList"
            >
              <img v-if="imageUrl" style="height: 100px;width: 200px" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过3M
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="visible1 = false">取 消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="saveUserHandler1"
            >确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>
<script>
import _ from 'lodash'
import { get, post, del } from '@/utils/request'
export default {
  name: 'Demo',

  props: {},

  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      data: {},
      visible: false,
      visible1: false,
      user: {},
      form: {},
      title: '修改个人信息',
      imageUrl: '',
      fileList: [],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},

  created() {
    this.Users()
  },

  mounted() {},
  // 组件方法
  methods: {
    // 修改头像
    toEditImg() {
      this.title = '修改头像'
      this.visible1 = true
    },

    saveUserHandler() {
      // console.log( 'iiii');
      this.$refs['user_form'].validate((valid) => {
        if (valid) {
          const url = '/baseUser/saveOrUpdate'
          post(url, this.form).then((res) => {
            // console.log(res, 'ooo');
            this.visible = false
            this.$message({ message: res.message, type: 'success' })
            this.Users()
          })
        } else {
          return false
        }
      })
    },

    // 修改个人信息
    EditInfomation() {
      this.form = _.clone(this.user)
      this.title = '修改个人信息'
      this.visible = true
    },

    // 查询数据
    Users() {
      this.$store.dispatch('user/getInfo').then((res) => {
        this.user = res
        this.imageUrl = res.userFace
        this.data.id = res.id
      })
    },

    // 头像上传成功回调
    uploadSuccessHandler(res) {
      console.log(res)
      if (res.status == 200) {
        this.imageUrl = 'http://121.199.29.84:8888/group1/' + res.data.id
        this.$set(
          this.data,
          'userface',
          'http://121.199.29.84:8888/group1/' + res.data.id
        )
      } else {
        this.$message({ type: 'error', message: '服务器异常!' })
        this.visible = false
      }
    },

    // 修改头像确认按钮
    saveUserHandler1() {
      const url = '/baseUser/alterUserface'
      // console.log(this.data);
      post(url, this.data).then((res) => {
        this.visible1 = false
        this.$message({ message: res.message, type: 'success' })
        this.Users()
      })
    }
  }
}
</script>

<style scoped>
.header {
  background-color: white;
  width: 500px;
  height: 700px;
  /* resize: horizontal;
  overflow: auto; */
}
.gerenxx {
  background-color: ghostwhite;
  flex: 1;
  overflow-y: auto;
}
.user {
  display: flex;
  height: calc(100vh - 100px);
  /* padding-left: 30px;
  padding-right: 30px; */
}
.demo-basic--circle {
  padding-top: 40px;
  padding-left: 40px;
}
.xx {
  padding-top: 20px;
  padding-left: 200px;
}
.btn {
  padding-top: 20px;
  padding-left: 40px;
}
.xiuGaiTouXian {
  padding-top: 20px;
  padding-left: 10px;
}
.el-image{
  height: 400px;
  width: 500px;
}

</style>
